<template>
  <div>
    <h1>我是产品页面--姓名是{{ name }}--年龄是{{ age }}</h1>
    <button @click="sub">点击我触发</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      name: "",
      age: "",
    };
  },
  methods: {
    sub() {
      this.$router.push({ name: "product", query: { name: "123" } });
    },
  },
  beforeRouteEnter(to, from, next) {
    // this.$route;
    console.log("beforeRouteEnter", to, from);
    // to:路由要去那个路由地址
    // form ：路由从哪个路由对象来的
    // next(); 执行下一个路由生命周期钩子
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate", to, from);
    next();
  },
  beforeRouteLeave(to, from, next){
    console.log("beforeRouteLeave",to, from);
    next();
  },
  /* 
    - beforeRouteEnter ：路由进入的时候触发
    - beforeRouteUpdate ：路由更新的时候触发
    - beforeRouteLeave ：路由离开的时候触发
  */
  created: function () {
    console.log(this.$route.query);
    this.name = this.$route.query.name;
    this.age = this.$route.query.age;
  },
  watch: {
    $route: function (newvalue) {
      console.log("??", newvalue);
    },
  },
};
</script>

<style>
</style>